import React from "react";
import { Link } from "react-router-dom";
import PageTitle from '../../components/page-title'
import { Button, Select, Divider, Input } from 'antd'
import { SnippetsOutlined, DeleteOutlined, CheckSquareOutlined } from '@ant-design/icons';
import CheackBoxPagination from '../../components/cheackBoxPagination'
//import OverList from '../Over/OverList'
const { Option } = Select;
class PostTask extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            select: [],
            header: [
                {
                    title: '停止工具',
                    //ßdataIndex: 'name',
                    render: () => <Select  style={{width:300}} onChange={this.handleChange}>
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                        <Option value="disabled" disabled>
                            Disabled
                        </Option>
                        <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                },
                {
                    title: '停止参数',
                    //ßdataIndex: 'name',
                    render: () => <Input  style={{width:300}}placeholder="选填" />
                },
            ],
            data: [
                { key: 1 },
                { key: 2 },
            ],
            //计数器
            addKey: 2
        }
    }
    //select选择的是哪个
    handleChange(value) {
        console.log(value)
        // return value
    }

    deleteWhat(e) {
        this.setState({
            select: e
        })
    }

    delete() {
        //数组合并去重
        let arr1 = this.state.data
        let arr2 = this.state.select
        arr1 = arr1.filter(item => {
            let idList = arr2.map(v => v.key)
            return !idList.includes(item.key)

        })
        this.setState({
            data: arr1
        })
    }


    addData() {
        let mykey = this.state.addKey
        let newdata = this.state.data
        let a = mykey + 1
        newdata.push({ key: mykey + 1 })
        this.setState({
            data: [...newdata],
            //计数器
            addKey: a
        })
    }

    over(){
        alert('验证和提交表单到后端api上')
    }
    render() {
        return (
            <div id="page-wrapper">
                <div style={{ justifyContent: "center", display: "flex", marginTop: 20 }}>
                    <PageTitle title="4/4 前置任务" /></div>
                <div>
                    <span>环境号</span><span>100</span>
                </div>

                <Divider />
                <Button type="primary"
                    onClick={() => this.addData()}
                    icon={<SnippetsOutlined />}>
                        新增
                </Button>

                <Button
                    onClick={() => this.delete()}
                    style={{ marginLeft: 10 }}
                    type="ghost" danger={true}
                    icon={<DeleteOutlined />}>
                    删除
                </Button>

                <Button style={{ marginLeft: 10 }} type="ghost" icon={<CheckSquareOutlined />}>
                    保存
                </Button>

                <CheackBoxPagination columns={this.state.header}
                    dataSource={this.state.data}
                    pagination={false}
                    delete={e => { this.deleteWhat(e) }}
                //delete={this.delete.bind(this)}
                />

                <div style={{ justifyContent: "center", display: "flex", marginTop: 20 }}>
                    <Button
                        type="primary"
                        size="large"
                        style={{ marginRight: 45 }}>
                        <Link 
                         to='/Antecedents'
                         >上一步</Link>
                    </Button>
                    <Button type="primary" size="large" onClick={()=>this.over()} >
                        <Link   to='/inputHome'>完成</Link>
                    </Button>
                </div>

            </div>
        )
    }
}

export default PostTask